<template>
	<view>
		<z-paging ref="paging" @pageScroll="pageScroll" v-model="spLIst" @query="queryList" :refresher-enabled="false">
			<v-headerview actionBarColor="#ffffff" :showBackIcon="true" titleColor="#000" pageTitle="兑换记录">
				<view class="" style="height: 172rpx;"></view>
				<u-sticky offset-top="172">
					<view class="tabs_box">
						<view class="dandu_box" :class="selId == item.id ? 'dandu_box1' : ''"
							v-for="(item, index) in list" :key="index" @click="sel(item)">{{ item.name }}
						</view>
					</view>
				</u-sticky>
				<view class="big_content_box">
					<view class="dange_sp_box" style="position:relative;" v-for="(item, index) in spLIst" :key="index"
						@click="lookDetail(item)">
						<view v-if="item.status == 2"
							style="background-image: url('https://image.dingxians.cn/image/2025-09-18/155460967.png');background-size: 100% 100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin:auto;width: 260rpx;height: 260rpx;">
						</view>
						<view class="top_img">
							<image class="" :src="item.box_prize_image" />
						</view>
						<view class="name_box slh">{{ item.box_prize_name }}</view>
						<view class="price_box">
							<text style="margin-right: 30rpx;">{{ item.recovery_price * 1 }}积分</text>
							<text style="text-decoration:line-through; opacity: .7;">￥{{ item.price * 1 }}</text>
						</view>
						<!-- <view class="ys_box">已售{{ item.sales }}份</view> -->
						<!-- <view class="dh_box" @click="$router('/redemption/dh?id=' + item.id)">兑换</view> -->
					</view>
					<view class="zw" style="width: 260rpx;"></view>
				</view>
			</v-headerview>
		</z-paging>
	</view>

</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [{
						id: 1,
						name: '未核销'
					},
					{
						id: 2,
						name: '已核销'
					},
				],
				spLIst: [],
				selId: 1
			};
		},
		onLoad(e) {

		},
		onShow() {
			this.getList()
		},
		methods: {
			sel(item) {
				this.selId = item.id
				this.$refs.paging.reload()
			},
			// 监听滚动高度
			pageScroll(event) {
				console.log(event)
				uni.$emit("onPageScroll", event.detail.scrollTop)
			},
			queryList(pageNo, pageSize) {
				let data = {
					page: pageNo,
					limit: pageSize,
					status: this.selId
				}
				this.$Request.post(this.$api.index.ordersPrizeData, data).then(res => {
					this.$refs.paging.complete(res.data.data)
				})
			},
			lookDetail(item) {
				if (item.status == 1) {
					uni.showModal({
						title: "查看兑换码",
						content: item.code,
						success: function(res) {
							if (res.confirm) {

							} else {
								console.log('取消')
							}
						}
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.zp-scroll-view-absolute {
		background-image: none !important;
		background-color: #ffffff !important;
		position: relative !important;
	}

	.tabs_box {
		width: 80%;
		height: 60rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1rpx solid #f64b43;
		border-radius: 10rpx;
		margin-bottom: 20rpx;

		.dandu_box {
			width: 50%;
			height: 100%;
			text-align: center;
			line-height: 60rpx;
			color: #000;

			&.dandu_box1 {
				background-color: #f64b43;
				color: #fff;
			}
		}
	}

	.big_content_box {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;

		.dange_sp_box {
			flex-shrink: 0;
			position: relative;
			width: 260rpx;
			height: 360rpx;
			background-color: #f0f0f0;
			border-radius: 30rpx;
			margin-bottom: 20rpx;
			// margin: 0 50rpx;

			.top_img {
				width: 100%;
				height: 260rpx;
				border-radius: 30rpx 30rpx 0 0;

				image {
					width: 100%;
					height: 260rpx;
					border-radius: 30rpx 30rpx 0 0;
				}
			}
		}

		.name_box {
			width: 80%;
			height: 40rpx;
			line-height: 40rpx;
			font-size: 24rpx;
			color: #000;
			margin: auto;
			font-weight: 600;
			margin-bottom: 10rpx;
		}

		.price_box {
			width: 80%;
			height: 40rpx;
			line-height: 40rpx;
			font-size: 24rpx;
			color: red;
			margin: auto;
			font-weight: 600;
			margin-bottom: 24rpx;
		}

		.ys_box {
			width: 80%;
			height: 20rpx;
			font-size: 20rpx;
			line-height: 20rpx;
			color: #bbb;
			margin: auto;
		}

		.dh_box {
			width: 80rpx;
			height: 40rpx;
			line-height: 40rpx;
			background-color: #f64b43;
			color: #fff;
			text-align: center;
			position: absolute;
			bottom: 20rpx;
			right: 10rpx;
			border-radius: 10rpx;
		}
	}

	.dange_dhjs_box {
		width: 700rpx;
		height: 240rpx;
		background-color: #fff;
		margin: auto;
		border-radius: 30rpx;
		margin-bottom: 20rpx;


		.t_box {
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 24rpx;
			color: #989898;
			border-bottom: 1rpx solid #f1f1f1;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;


		}

		.c_box {
			width: 100%;
			height: 180rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left_box {
				width: auto;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.image {
					width: 130rpx;
					height: 130rpx;
					border-radius: 10rpx;
					margin-right: 18rpx;

					image {
						width: 130rpx;
						height: 130rpx;
						border-radius: 10rpx;
					}
				}

				.name_box {
					width: auto;
					height: 130rpx;

					.top_box {
						width: auto;
						height: 75rpx;
						line-height: 90rpx;
						color: #333;
						font-size: 26rpx;
					}

					.bot_box {
						width: auto;
						height: 75rpx;
						line-height: 40rpx;
						font-size: 26rpx;
						color: #333;
					}
				}
			}

			.right_box {
				width: auto;
				height: 130rpx;

				.to_box {
					width: auto;
					height: 75rpx;
					line-height: 90rpx;
					font-size: 30rpx;
					color: #f64b43;
				}

				.bo_box {
					width: auto;
					height: 75rpx;
					line-height: 40rpx;
					font-size: 22rpx;
					color: #989898;
				}
			}
		}


	}
</style>